<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
<link href="../resources/css/main.css" rel="stylesheet" type="text/css" />
</h:head>

<h:body> 	
<div class="contenitore">
<h:form>
   <p:panel header="Payment Form">
		<h:panelGrid columns="2" cellpadding="5">
		  	<h:outputText value="Nome: " />
			<p:inputMask id="nome" value="#{maskpagamento.nome}" />
			
			
			 <h:outputText value="Cognome: " />
			<p:inputMask id="cognome" value="#{maskpagamento.cognome}"></p:inputMask>
			
			
			<h:outputText value="EMail: " />
			<p:inputMask value="#{maskpagamento.email}"></p:inputMask>
		
			
			 <h:outputText value="Phone: " />  
             <p:inputMask value="#{maskpagamento.phone}" mask="(999) 999-9999999"/>  
            
			
			<h:outputText value="Numero Carta: " />
			<p:inputMask value="#{maskpagamento.ncarta}" mask="9999-9999-9999-9999"/>
			
			
		   	<h:outputText value="CVV: " />
			<p:inputMask value="#{maskpagamento.cvv}" mask="999"/>
			
			
			<p:commandButton value="Reset" type="reset" />
			<p:commandButton value="Riepilogo" update="display" oncomplete="PF('dlg').show()"/>
         </h:panelGrid>
	</p:panel>
	  
    <p:dialog widgetVar="dlg" modal="true">  
        <h:panelGrid id="display" columns="2" cellpadding="5">  
      
            <h:outputText value="Nome: " />  
            <h:outputText value="#{maskpagamento.nome}" />  
              
            <h:outputText value="Cognome: " />  
            <h:outputText value="#{maskpagamento.cognome}" />  
              
            <h:outputText value="e-Mail: " />  
            <h:outputText value="#{maskpagamento.email}"/>  
              
            <h:outputText value="Phone: " />  
            <h:outputText value="#{maskpagamento.phone}" />  
              
            <h:outputText value="N° Carta: " />  
            <h:outputText value="#{maskpagamento.ncarta}" />  
              
            <h:outputText value="CVV: " />  
            <h:outputText value="#{maskpagamento.cvv}" />  
            
            <p:commandButton value="Paga" action="#{gestionepagamento.paga()}" />
      
        </h:panelGrid>  
    </p:dialog>  
</h:form>
 </div>                   
</h:body>
</html>
